<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<img src="../images/8.jpg" class="bg1">
     <div>
     	<p style=" position: relative;
    top: 200px;
    left: 100px;
    font-size: x-large;">生活不只眼前的苟且-</p>
     	<p style=" position: relative;
    top: 220px;
    left: 200px;
    font-size: x-large;">-还有诗和远方</p>
     </div>
     <form action="/lo" class="m1" method="post">
     
     	<h3 style="    position: relative;
    left: 115px;    font-size: 18px;
    color: #9c1010;
    ">账号注册</h3>
     
     	  <div>
            <p style="position:absolute;
            left:30px;">用户名:</p><input type="text" name="u_name" class="m2" p="^[a-z][a-z0-9A-Z]{4,11}$" msg="用户名要求英文字母开头,5-15位" onblur="checkuname()">
        </div>

     	<div>
     		<p style="position: relative;
    top: 82px;
    left: 45px;
}">密码:</p><input type="text" name="u_passwd" class="m3">
     	</div>
     	<div>
     		<p style="position: relative;
    top: 112px;
    left: 17px;
}">确认密码:</p><input type="text" name="u_passwd" class="m4">
     	</div>
     	<div><p style="    position: relative;
    left: 30px;
    top: 145px;">手机号:</p>
     	<input type="text" name="u_phone" class="m5"></div>
     	<div>
     		<input type="submit" value="获取验证码" style="    height: 30px;
    position: absolute;
    top: 320px;
    left: 230px;">

       <p style="    position: absolute;
    left: 10px;
    top: 310px">输入验证码:</p>
       <input type="text" class="m6">
     	</div>
     	<div>
			<input type="submit" value="注册"  class="m7" >
		</div>
		<div class="bottom-link">
    	    
    	          已经有账号？
    	           <a href="/lo">马上登陆</a>
    </div>
		
     </form>


	<style>
		.bg1{
			position: fixed;
			width: 100%;
			height: 100%;
		}

		.m1{
			    height: 420px;
    width: 340px;
    position: absolute;
    background-color: white;
    left: 600px;
    top: 80px;
    border-radius: 4px;
    border: 1px solid #CCC; 


		}
		.m2{
			    width: 210px;
    height: 30px;
    position: absolute;
    top: 67px;
    left: 97px;
        border-radius: 4px;
        border: 1px solid #CCC; 

		}
		.m3{
			   position: absolute;
			    width: 210px;
    height: 30px;
    left: 97px;
    top: 130px;
        border-radius: 4px;
        border: 1px solid #CCC; 

		}
		.m4{
				
			   position: absolute;
			    width: 210px;
    height: 30px;
    left: 97px;
    top: 194px;
        border-radius: 4px;
        border: 1px solid #CCC; 

		}
		
		.m5{
			height: 30px;
    width: 210px;
    position: ab;
    position: absolute;
    top: 260px;
    left: 97px;
        border-radius: 4px;
        border: 1px solid #CCC; 

		}
		.m6{
			    position: absolute;
    width: 100px;
    height: 23px;
    top: 320px;
    left: 108px;
        border-radius: 4px;
        border: 1px solid #CCC; 

		}
		.m7{
			width: 270px;
    height: 42px;
    border: 0;
    background-color: #ffa800;
    border-radius: 5px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 360px;
    left: 45px;
    border: 1px solid #CCC; 

		}

		.bottom-link {
    width: 140px;
    margin: 10px auto;
    background-color: #000;
    border-radius: 15px;
    background-color: rgba(0,0,0,.4);
    text-align: center;
    font-size: 12px;
    color: #fff;
    padding: 4px 0;
    text-shadow: 1px 1px 1px rgba(0,0,0,.4);
        position: relative;
    top: 275px;
}
	</style>
    <script type="text/javascript">
        function checkuname() {
            console.log("hhhhh");
            var a = document.getElementsByName('u_name')[0];
            var name = a.value;
            var p = a.getAttribute('p');
            var reg = new RegExp(p);
            if(!reg.test(name)){
                alert("用户名不正确");
            }
        }
    </script>
</body>
</html>